<template>
  <dv-border-box-7 id="first-right-content">
    <div class="content-tittle">设备运行状态</div>
    <div class="content-subtitle">
      设备总数 :

      <div class="device-number-1">{{DeviceData.allDevices }}</div>
      <div class="measure">台</div>
    </div>
    <div class="content-subtitle">
      运行设备 :
      <div class="device-number-2">{{ DeviceData.runDevices }}</div>
      <div class="measure">台</div>
    </div>
    <div class="content-subtitle">
      空闲设备 :
      <!-- <div class="device-number-3">{{ DeviceData.freeDevices }}</div> -->
      <div class="device-number-3">0</div>
      <div class="measure">台</div>
    </div>
    <div class="content-subtitle">
      故障设备 :
      <!-- <div class="device-number-4">{{ DeviceData.pauseDevices }}</div> -->
      <div class="device-number-4">0</div>
      <div class="measure">台</div>
    </div>
    <!-- <div class="content-subtitle">关机设备   :
   <div class="device-number-5">0</div>
   <div class="measure">台</div>


</div> -->
  </dv-border-box-7>
</template>

<script>
import * as echarts from "echarts";
import Axios from "axios";
export default {
  name: "firstRightContent",
  data() {
    return {
      DeviceData:{
      allDevices:23,
      runDevices: 23,
      freeDevices: 0,
      pauseDevices: 0,
      }

    };
  },
  methods: {
    UpdateData() {
      var _this = this;
      var url = this.$baseUrl + "equipment/device-number";
       Axios.get(url).then(
        (response) => (
        _this.DeviceData=response.data
        )
      );
    },
  },

  mounted() {
    this.UpdateData();
     setInterval(this.UpdateData,10000);
  },
};
</script>

<style lang="less">
#first-right-content {
  width: 20%;
  height: 100%;
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
  margin: 20px;
}
.content-tittle {
  font-size: 20px;
  font-weight: bold;
  color: white;
  justify-content: center;
  align-items: center;
}
.content-subtitle {
  font-size: 25px;
  font-weight: bold;
  color: white;
  justify-content: center;
  align-items: center;
  padding-top: 10%;
  margin: 25px;
}
.device-number-1 {
  padding-left: 50%;
  font-size: 40px;
  color: blue;
}
.device-number-2 {
  padding-left: 50%;
  font-size: 40px;
  color: green;
}
.device-number-3 {
  padding-left: 50%;
  font-size: 40px;
  color: yellow;
}
.device-number-4 {
  padding-left: 50%;
  font-size: 40px;
  color: red;
}
.device-number-5 {
  padding-left: 50%;
  font-size: 40px;
  color: gray;
}
.measure {
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: white;
  justify-content: center;
  align-items: center;
}
</style>
